<template>
    <div class="tabcontrol">
       <div class="tabcontrol-item" :class="{aclass:index==cruntindex}" 
       v-for="(item,index) in title" :key="index"
       @click="changetitle(index)"><span>{{item}}</span></div>
    </div>
</template>

<script>
export default {
props:{
    title:{
        type:Array,
        difault(){
            return []
        }
    }
},
data() {
    return {
        cruntindex:0
    }
},
methods: {
    changetitle(index){
        this.cruntindex = index
        this.$emit("tabClick",index)
    }
},
}
</script>

<style scoped>
.tabcontrol{
    display: flex;
    background-color: #eee;
    left: 0;
}
.tabcontrol-item{
    flex: 1;
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
}
.aclass{
    color: deeppink;
   
}
.aclass span{
    padding: 5px 0px;
    border-bottom: 3px solid deeppink;
}
</style>